import React, { ReactNode, CSSProperties } from 'react';
import { Overlay } from 'react-vant';
import './index.css'; // Import the CSS file

interface CustomOverlayProps {
  /** 是否显示遮罩层 */
  visible: boolean;
  /** 关闭时的回调函数 */
  onClose: () => void;
  /** 内容区域宽度，默认 200 */
  width?: number | string;
  /** 内容区域高度，默认 100 */
  height?: number | string;
  /** 自定义内容 */
  children?: ReactNode;
  /** 遮罩层样式覆盖 */
  overlayStyle?: CSSProperties;
  /** 内容区域样式覆盖 */
  contentStyle?: CSSProperties;
  /** 点击内容区域是否关闭，默认 false */
  closeOnClickContent?: boolean;
  /** 是否显示关闭按钮，默认 true */
  showCloseButton?: boolean;
}

const CustomOverlay: React.FC<CustomOverlayProps> = ({
  visible,
  onClose,
  width = 200,
  height = 300,
  children,
  overlayStyle = {},
  contentStyle = {},
  closeOnClickContent = false,
  showCloseButton = true,
}) => {
  const handleContentClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (closeOnClickContent) {
      onClose();
    }
  };

  return (
    <Overlay visible={visible} onClick={onClose} className="custom-overlay" style={overlayStyle}>
      <div
        className="custom-overlay-content"
        style={{ ...contentStyle }}
        onClick={handleContentClick}
      >
        {showCloseButton ? (
          <div
            className="custom-overlay-close-btn"
            onClick={(e) => {
              e.stopPropagation();
              onClose();
            }}
          >
            ×
          </div>
        ) : null}
        <div style={{ width, height, overflow: 'auto' }}>{children}</div>
      </div>
    </Overlay>
  );
};

export default CustomOverlay;
